.internationalSchool-module-1 {
  background-color: #fff;
  padding: 0 rpx(30);
  box-sizing: border-box;
  overflow: hidden;
  .card {
    width: rpx(688);
    box-shadow: 0px 0px 0.13rem 0px rgba(188,185,185,0.7);
    border-radius: rpx(10);
    margin: 0 auto rpx(20);
    overflow: hidden;
    .head {
      @include flex;
      height: rpx(87);
      background-color: #F6F6F6;
      box-sizing: border-box;
      padding-right: rpx(24);
      .icon {
        margin-left: rpx(24);
        margin-right: rpx(14);
        width: rpx(35);
        height: rpx(35);
      }
      .name {
        font-size: rpx(28);
        color: #FF2E30; font-weight: bold;
        margin-right: rpx(20);
      }
      .line {
        flex: 1;
        height: 1px;
        background-color: #D9D9D9;
      }
    }
    .content {
      overflow: hidden;
    }
    .grades {
      height: rpx(190);
      @include flex;
      .grade-list {
        @include flex(row,center,center,wrap);
      }
      .grade-item {
        width: rpx(311);
        margin: rpx(11) rpx(9);
        height: rpx(62);
        border: 1px dashed #C4C4C4;
        border-radius: rpx(17);
        @include flex;
        box-sizing: border-box;
        text-align: center;
        font-size: rpx(24);
        color: #383838; font-weight: bold;
        &:hover {
          background-color: #FF2E30;
          color: #fff;
          border: 1px solid #FF2E30;
        }
      }
    }
    .courses {
      height: rpx(206);
      padding-left: rpx(24);
      @include flex;
      .course-list {
        @include flex(row,center,space-between,wrap);
      }
      &.private-course {
        .item {
          width: 33.333333%;
        }
      }
      .item {
        width: 25%;
        margin: rpx(16) 0;
        box-sizing: border-box;
        padding-left: rpx(40);
        height: rpx(28);
        font-size: rpx(19);
        color: #000000;
        background: url('../images/internationalSchool/checked.png') no-repeat left center;
        background-size: rpx(31) auto; font-weight: bold;
      }
    }
    .regions {
      padding: rpx(31) rpx(32) rpx(11);
      box-sizing: border-box;
      overflow: hidden;
      .item {
        width: calc((100% - 0.32rem) / 3);
        height: rpx(52);
        border: 1px solid #D9D9D9;
        box-sizing: border-box;
        text-align: center;
        @include flex;
        font-size: rpx(24);
        color: #222222;
        float: left;
        margin-right: rpx(16);
        margin-bottom: rpx(14);
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:hover {
          background-color: #FF2E30;
          border-color: #FF2E30;
          color: #fff;
        }
      }
    }
    .conditions {
      overflow: hidden;
      padding-left: rpx(30);
      box-sizing: border-box;
      padding-bottom: rpx(30);
      .item {
        float: left;
        width: rpx(256);
        @include flex;
        margin-bottom: rpx(14);
        .icon {
          width: rpx(51);
          height: rpx(51);
          margin-right: rpx(14);
        }
        .name {
          font-size: rpx(24);
          color: #FF2E30;
          flex: 1;
        }
      }
    }
  }
}

.internationalSchool-module-2 {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 rpx(30);
  overflow: hidden;
  .navs {
    @include flex(row,flex-end,center);
    height: rpx(64);
    margin-bottom: rpx(44);
    .item {
      width: rpx(103);
      height: rpx(48);
      line-height: rpx(48);
      text-align: center;
      border-radius: rpx(24);
      font-size: rpx(25);
      color: #fff;
      margin: 0 rpx(19);
      transition: all 300ms;
      &.active {
        width: rpx(136);
        height: rpx(64);
        line-height: rpx(63);
        font-size: rpx(33);
        border-radius: rpx(32);
      }
    }
    .item-1 {
      background-color: #B0BA9E;
    }
    .item-2 {
      background-color: #8EAFD1;
    }
    .item-3 {
      background-color: #EEC77A;
    }
    .item-4 {
      background-color: #92C0B4;
    }
  }
  .nav-box {
    width: rpx(692);
    border: 1px solid #B0BA9E;
    border-radius: rpx(20);
    box-sizing: border-box;
    margin: 0 auto rpx(42);
    overflow: hidden;
    .top {
      width: 100%;
      background: #B0BA9E;
      padding: rpx(28) rpx(66) rpx(28) 0;
      box-sizing: border-box;
      @include flex;
      .left {
        width: rpx(200);
        margin-right: rpx(31);
        overflow: hidden;
        span {
          float: right;
          display: block;
          height: rpx(52);
          line-height: rpx(52);
          padding: 0 rpx(24);
          background-color: #fff;
          font-size: rpx(22);
          color: #000000;
          border-radius: rpx(8);
          position: relative;
          margin-right: rpx(12);
          &::after {
            content: '';
            width: 0;
            height: 0;
            border-top: rpx(8) solid transparent;
            border-bottom: rpx(8) solid transparent;
            border-left: rpx(12) solid #fff;
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .right {
        flex: 1;
        font-size: rpx(22);
        line-height: 1.4;
        color: #fff;
        text-align: justify;
      }
    }
    .bottom {
      width: 100%;
      overflow: hidden;
      margin: auto;
      padding: rpx(34) rpx(20) rpx(44) rpx(100);
      .item {
        font-size: rpx(22);
        @include flex(row,flex-start,center);
        line-height: 1.8;
        .label {
          color: #B0BA9E;
        }
        .value {
          flex: 1;
          color: #000000;
        }
      }
    }
  }
  .citys {
    overflow: hidden;
    padding-bottom: rpx(10);
    margin-bottom: rpx(12);
    .item {
      float: left;
      padding: 0 rpx(24);
      height: rpx(54);
      border-radius: rpx(27);
      @include flex;
      text-align: center;
      border: 1px solid #fff;
      box-sizing: border-box;
      font-size: rpx(24);
      margin-right: rpx(10);
      position: relative;
      &.active {
        border-color: #798267;
        &::before {
          content: '';
          border-left: rpx(10) solid transparent;
          border-right: rpx(10) solid transparent;
          border-top: rpx(10) solid #798267;
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
        }
        &::after {
          content: '';
          border-left: rpx(8) solid transparent;
          border-right: rpx(8) solid transparent;
          border-top: rpx(8) solid #fff;
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .schools {
    width: rpx(693);
    margin: 0 auto rpx(28);
    background: #F6F6F6;
    border-radius: 0px 0px 0.1rem 0.1rem;
    overflow: hidden;
    box-sizing: border-box;
    padding: rpx(26);
    .item {
      width: calc((100% - 0.2rem) / 3);
      float: left;
      height: rpx(50);
      line-height: rpx(50);
      background: #FFFFFF;
      border-radius: rpx(25);
      margin-right: rpx(10);
      margin-bottom: rpx(10);
      font-size: rpx(20);
      text-align: center;
      color: #000000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:active {
        color: #798267;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}


.kindergarten-module-1 {
  @include flex(row,flex-start);
  .left {
    flex: 1;
    overflow: hidden;
    .link {
      width: rpx(202);
      height: rpx(52);
      line-height: rpx(52);
      text-align: center;
      background: #FFF6E8;
      border-radius: rpx(26);
      display: block;
      float: left;
      font-size: rpx(24);
      color: #333333;
      margin-bottom: rpx(26);
      margin-right: rpx(22);
      &:active {
        background-color: #FFDCA5;
      }
    }
  }
  .right {
    width: rpx(234);
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

.kindergarten-module-2 {
  overflow: hidden;
  padding-bottom: rpx(30);
  .head {
    height: rpx(40);
    @include flex;
    margin-bottom: rpx(22);
    .bt {
      margin-right: rpx(20);
      font-size: rpx(30);
      font-weight: bold;
      color: #000000;
    }
    .line {
      flex: 1;
      border-bottom: 1px dashed #BCBCBC;
    }
  }
  .content {
    overflow: hidden;
    .item {
      position: relative;
      overflow: hidden;
      .left {
        width: rpx(28);
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        span {
          width: rpx(28);
          height: rpx(28);
          background-color: #e45f7e;
          border-radius: 50%;
          display: block;
        }
        &::after {
          content: '';
          width: 1px;
          height: 100%;
          background-color: #e45f7e;
          position: absolute;
          left: 50%;
          top: 0;
        }
      }
      .right {
        margin-left: rpx(60);
        margin-bottom: rpx(12);
        transform: translateY(-0.08rem);
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        padding: rpx(8);
        .box {
          width: rpx(582);
          background: #FFFFFF;
          box-shadow: 0px 0px 0.13rem 0px rgba(188,185,185,0.7);
          border-radius: rpx(10);
          .top {
            width: 100%;
            height:rpx(64);
            background: linear-gradient(87deg, #E45F7E 0%, #FC935A 100%);
            border-radius: 10px 10px 0px 0px;
            @include flex;
            box-sizing: border-box;
            padding-left: rpx(30);
            padding-right: rpx(25);
            .t1 {
              flex: 1;
              font-size: rpx(28);
              color: #FFFFFF;
            }
            .btn {
              width: rpx(116);
              height: rpx(38);
              line-height: rpx(38);
              text-align: center;
              background: #E45F7E;
              border-radius: rpx(10);
              font-size: rpx(20);
              color: #fff;
            }
          }
          .bottom {
            padding:  rpx(20) rpx(30);
            box-sizing: border-box;
            font-size: rpx(20);
            color: #000000;
            line-height: 1.6;
            text-align: justify;
            .bt {
              font-weight: bold;
              margin-top: rpx(28);
              &:first-child {
                margin-top: 0;
              }
            }
            .text {
              @include flex(row,flex-satrt);
              margin: rpx(8) 0;
              .dot {
                width: rpx(14);
                height: rpx(14);
                background: #ECD5A0;
                border-radius: 50%;
                margin-right: rpx(12);
                margin-top: rpx(7);
              }
              .cont, .content {
                flex: 1;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}

.primary-school-1 {
  .content {
    .item {
      .left {
        span {
          background-color: #FFDB88;
        }
        &:after {
          background-color: #FFDB88;
        }
      }
      .right {
        .box {
          .top {
            background: linear-gradient(87deg, #ECD5A0 0%, #FFFFFF 100%);
            .t1 {
              color: #000000;
            }
            .btn {
              background-color: #FFDB88;
              color: #5F4200;
            }
          }
        }
      }
    }
  }
}

.primary-school-2 {
  background-color: #fff;
  padding: 0 rpx(30);
  box-sizing: border-box;
  overflow: hidden;
  .citys {
    overflow: auto;
    margin-bottom: rpx(14);
    .city-list {
      display: inline-flex;
      white-space: nowrap;
      font-size: 0;
      padding-bottom: rpx(12);
      .item {
        height: rpx(60);
        border-radius: rpx(30);
        text-align: center;
        line-height: rpx(60);
        padding: 0 rpx(21);
        font-size: rpx(28);
        color: #000000;
        &.active {
          background-color: #FFE5A8;
          position: relative;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-left: rpx(12) solid transparent;
            border-right: rpx(12) solid transparent;
            border-top: rpx(12) solid #FFE5A8;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .regions {
    overflow: auto;
    margin-bottom: rpx(30);
    .region-list {
      display: inline-flex;
      white-space: nowrap;
      font-size: 0;
      padding-bottom: rpx(14);
      .item {
        margin-right: rpx(15);
        height: rpx(46);
        line-height: rpx(46);
        background: #F6F6F6;
        border-radius: rpx(23);
        padding: 0 rpx(22);
        font-size: rpx(24);
        color: #666666;
        &.active {
          background-color: #FFE5A8;
          color: #000000;
        }
      }
    }
  }
  .primary-school-swipe {
    padding-bottom: rpx(50);
    .swipe-item {
      @include flex;
      margin-bottom: rpx(32);
      .photo {
        width: rpx(269);
        height: rpx(167);
        background: #030102;
        border-radius: rpx(10);
        overflow: hidden;
        margin-right: rpx(26);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
      .infos {
        flex: 1;
        overflow: hidden;
        .name {
          font-size: rpx(26);
          color: #000000;
          font-weight: bold;
          margin-bottom: rpx(26);
        }
        .tags {
          overflow: hidden;
          .item {
            float: left;
            width: rpx(162);
            height: rpx(32);
            line-height: rpx(32);
            text-align: center;
            background: #F0F0F0;
            font-size: rpx(20);
            color: #666666;
            margin-right: rpx(18);
            margin-bottom: rpx(16);
          }
        }
      }
    }
  }
}

.middle-school-1 {
  .content {
    .item {
      .left {
        span {
          background-color: #FFDB88;
        }
        &:after {
          background-color: #FFDB88;
        }
      }
      .right {
        .box {
          .top {
            background: linear-gradient(87deg, #FF9F06 0%, #FFFFFF 100%);
            .t1 {
              color: #fff;
            }
            .btn {
              background-color: #FFDB88;
              color: #5F4200;
            }
          }
        }
      }
    }
  }
}

.middle-school-2 {
  .citys {
    .city-list {
      .item {
        &.active {
          background-color: #FF9F06;
          color: #fff;
          &:after {
            border-top-color: #FF9F06;
          }
        }
      }
    }
  }
  .regions {
    .region-list {
      .item {
        &.active {
          background-color: #FFDCA5;
          color: #9F6100;
        }
      }
    }
  }
}

.high-school {
  .left {
    .link {
      background-color: #E3E9FF;
      &:active {
        background-color: #4260D8;
        color: #fff;
      }
    }
  }
}

.high-school-1 {
  .content {
    .item {
      .left {
        span {
          background-color: #4260D8;
        }
        &:after {
          background-color: #4260D8;
        }
      }
      .right {
        .box {
          .top {
            background: linear-gradient(87deg, #A087FC 0%, #ECA3F4 100%);
            .t1 {
              color: #fff;
            }
            .btn {
              background-color: #AC8BFB;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

.high-school-2 {
  .citys {
    .city-list {
      .item {
        &.active {
          background-color: #4260D8;
          color: #fff;
          &:after {
            border-top-color: #4260D8;
          }
        }
      }
    }
  }
  .regions {
    .region-list {
      .item {
        &.active {
          background-color: #E3E9FF;
          color: #4260D8;
        }
      }
    }
  }
}

.private-primary {
  .left {
    .link {
      background-color: #ECECFF;
      &:active {
        background-color: #4260D8;
        color: #fff;
      }
    }
  }
}
.private-primary-1 {
  .content {
    .item {
      .left {
        span {
          background-color: #4260D8;
        }
        &:after {
          background-color: #4260D8;
        }
      }
      .right {
        .box {
          .top {
            background: linear-gradient(87deg, #4044E7 0%, #FFFFFF 100%);
            .t1 {
              color: #fff;
            }
            .btn {
              background-color: #4044E7;
              color: #fff;
            }
          }
          .bottom {
            .text .dot {
              background-color: #C1C3FF;
            }
          }
        }
      }
    }
  }
}
.private-primary-2 {
  .citys {
    .city-list {
      .item {
        &.active {
          background-color: #4044E7;
          color: #fff;
          &:after {
            border-top-color: #4044E7;
          }
        }
      }
    }
  }
  .regions {
    .region-list {
      .item {
        &.active {
          background-color: #ECECFF;
          color: #000;
        }
      }
    }
  }
}

.private-high {
  .left {
    .link {
      background-color: #E7FFF9;
      &:active {
        background-color: #29BA95;
        color: #fff;
      }
    }
  }
}
.private-high-1 {
  .content {
    .item {
      .left {
        span {
          background-color: #a5e1d2;
        }
        &:after {
          background-color: #a5e1d2;
        }
      }
      .right {
        .box {
          .top {
            background: linear-gradient(87deg, #29BA95 0%, #FFFFFF 100%);
            .t1 {
              color: #fff;
            }
            .btn {
              background-color: #29BA95;
              color: #fff;
            }
          }
          .bottom {
            .text .dot {
              background-color: #A5E1D2;
            }
          }
        }
      }
    }
  }
}
.private-high-2 {
  .citys {
    .city-list {
      .item {
        &.active {
          background-color: #29BA95;
          color: #fff;
          &:after {
            border-top-color: #29BA95;
          }
        }
      }
    }
  }
  .regions {
    .region-list {
      .item {
        &.active {
          background-color: #A5E1D2;
          color: #000;
        }
      }
    }
  }
}
